<template>
  <div class="curriculums" id="dayschedule">
    <div class="c-cs">
      <div class="c-tt">今日课表</div>
      <FontZoom :list="today"></FontZoom>
    </div>
    <div class="tomorrow c-cs">
      <div class="c-tt">明日课表</div>
      <FontZoom :list="tomorrow"></FontZoom>
    </div>
  </div>
</template>

<script>
import FontZoom from '@/modules/font-zoom/FontZoom'
export default {
  name: 'curriculums',
  props: {
    curriculums: {
      type: Object,
      default () { return {} }
    }
  },
  data () {
    return {
      showType: 0
    }
  },
  computed: {
    today () {
      return this.strToArr(this.curriculums.today)
    },
    tomorrow () {
      return this.strToArr(this.curriculums.tomorrow)
    }
  },
  methods: {
    strToArr (str) {
      if (str) return str.replace(/\s*^,/, '').split(',')
      return []
    }
  },
  components: {
    FontZoom
  }
}
</script>

<style scoped>
.curriculums {
  /*课程表*/
  width: 300px;
  height: 275px;
  float: left;
  font-size: 24px;
  color: #333;
}
.c-cs {
  display: block;
  width: 150px;
  float: left;
}

.c-cs /deep/ ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-cs /deep/ li {
  text-align: center;
  line-height: 35px;
  color: #666;
}

.c-cs .c-tt {
  color: #41cbec;

  font-size: 26px;
  text-align: center;
}

.tomorrow .c-tt {
  color: #9de4b8;
  font-size: 26px;
}
</style>
